// vuex功能集成
import Vue from 'vue'
import Vuex from 'vuex'
import api from '@/api'
import plugin from '@/plugin'

Vue.use(Vuex)

const store = new Vuex.Store({
    // state 是vuex独立管理的响应式数据仓库
    state:{
        msg:"vuex共享变量msg",
        user:{
            name:"tom",
            age:23
        },
        token:"asdasdasdasd"
    },
    // 也是vuex独立管理的响应式数据仓库，用法和使用规则等同于 state
    // getter 是vuex 中 state 记录的变量的 只能取值的计算属性
    getters:{
        getMsg:function(state){
            return state.msg + "=" + Math.random();
        }
    },
    // 将和vuex仓库记录的数据有关的异步请求修改方法，统一由vuex进行管理
    actions:{
        // key 异步请求方法的事件名，value为对应的异步回调函数
        //           ==> 方法在组件中的调用类似于 $emit 的调用，但使用的是vuex提供 dispath 方法
        // value 取值 function(store,params){}
        //      store vuex构建的仓库对象 和 组件中的 this.$store 是同一个对象
        //      params 该方法被执行时传入和额外参数
        async initUser(store,id=""){
            try {
                let { data } = await api.loadStuDetail(id);
                console.log(data);
                // store.state.user = data;
                store.commit("setUser",data)
            } catch (error) {
                console.log(error);
                plugin.tip("数据加载失败")
            }
        }
    },
    // 为state仓库中的变量修改提供日志记录和修改操作方法
    mutations:{
        // key 事件方法名  ==> 方法在组件中的调用类似于 $emit 的调用，但使用的是vuex提供 commit 方法
        // value 取值方法,并接受当前vuex的 state 仓库对象，可用于修改变量 ,同时接受额外修改参数值
        //       function(state,nv){}
        setMsg:function(state,nv){
            // setTimeout(() => {
            //     state.msg = nv
            // }, 4000);
            state.msg = nv
        },
        setUser(state,nv){
            state.user = nv;
        },
        setToken(state,nv){
            state.token = nv;
        }
    }
})


export default store;